<template>
	<view class="index">
		<view class="bf">
			<u-tabs :list="list" :current="current" :scrollable="false" lineWidth="40px" :lineColor="subColor"
				@change="tabChange"></u-tabs>
		</view>
		<view class="p10">
			<view class="card c3 mb10" v-for="(form,index) in orderList" :key="index" @click="toDtail(form)">
				<view class="bd1 dfa pb10">
					<view class="f-c-s f-1">
						<view class="c0">
							<view class="dfa">
								<text class="wei">#</text>
								<text class="f24 wei6">{{form.pickNo || '空'}}</text>
								<text class="ml5 f10 bs4" :style="{padding: '8rpx',background: '#FDDA34',color: '#000'}"
									v-if="form.appointment == 1">预</text>
								<text class="ml5 f10 bs4" :style="{padding: '8rpx',background: subColor,color: '#000'}"
									v-if="form.diningType == 1">打包</text>
							</view>
							<view class="mt5" v-if="form.scene == 2">
								<text class="pl5 c6 f10">{{form.diningTypeFormat}}
								<text class="mlr5">/</text>{{form.created_at}}</text>
							</view>
							<view class="mt5" v-if="form.scene == 1">
								<text class="pl5 c6 f10">{{form.appointment==1 ? '预约送达' : '立即送达'}}
								<text class="mlr5">/</text>{{form.serverTime}} 前送达</text>
							</view>
						</view>
					</view>
					<view class="f-c-e wei6">
						<view>
							<text class="pr5 c0">{{form.stateFormat}}</text>
						</view>
						<text class="f10 p5 c9 bf8 mt5 bs4">{{form.payTypeFormat}}</text>
					</view>
				</view>
				<view class="mt10 f-bt bd1 pb10" v-if="form.scene == 2">
					<view class="dfa f-g-1">
						<view class="f-e-c">
							<text class="c3">{{form.user.nickname}}</text>
							<text class="f10 c9 mt5">{{form.user.mobile}}</text>
							<view class="dfbc" v-if="form.payNum">
								<text class="f10 p5 c9 bf8 mt5 bs4" v-if="form.payNum==1">门店新客</text>
								<text class="f10 p5 c9 bf8 mt5 bs4" v-else>第{{form.payNum}}次下单</text>
							</view>
						</view>
					</view>
					<view class="f-g-0 mr10" @click.stop="tocenter(form.user.mobile)">
						<u-icon name="phone-fill" color="#000" size="30"></u-icon>
					</view>
				</view>
				<view class="mt10 f-bt bd1 pb10" v-if="form.scene == 1">
					<view class="dfa f-g-1">
						<view class="f-e-c">
							<view class="c3">
								<text class="wei c0">{{form.address.contact}}{{form.address.call}}</text>
								<text class="f10 c6 ml5">{{form.address.mobile}}</text>
							</view>
							<view class="f10 c6 mt5 flex f-y-c" @click.stop="ckwz(form.address)">
								<text>{{form.address.distance}}km</text> 
								<text>{{form.address.address}} {{form.address.description}}</text>
								<u-icon size="12" color="#666" name="arrow-right" style="line-height: 26rpx;"></u-icon>
							</view>	
							<view class="dfbc" v-if="form.orderIndex && form.orderIndex.storePay">
								<text class="f10 p5 c9 bf8 mt5 bs4" v-if="form.orderIndex.storePay==1">门店新客</text>
								<text class="f10 p5 c9 bf8 mt5 bs4" v-else>第{{form.orderIndex.storePay}}次下单</text>
							</view>
						</view>
					</view>
					<view class="f-g-0 mr10" @click.stop="tocenter(form.address.mobile)">
						<u-icon name="phone-fill" color="#000" size="30"></u-icon>
					</view>
				</view>
				<view class="flex bz mt10 bs4" v-if="form.notes">
					<view class="left f10 bs4 mr5">备注</view>
					<view class="f14 wei">{{ form.notes}}</view>
				</view>
				<view class="f-bt mt10">
					<view class="wei f16 c0">{{form.goods && form.goods.length}}种商品，共{{form.goodsNum}}件</view>
					<view>
						<view>
							<text>预计收入</text>
							<text class="wei f14">￥{{form.money}}</text>
						</view>
						<view class="f10 c9">顾客实际支付：￥{{form.money}}</view>
					</view>
				</view>
			</view>
			<view v-if="orderList.length==0" class="np f-c-c">
				<view class="iconfont icon-queshengtu cb" style="font-size: 90rpx;"></view>
				<view class="f12 cb mt20">暂无订单</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				current: 0,
				list: [{
					name: '全部订单',
					value: 'afterSale',
				}, {
					name: '待审批',
					value: 'refundApply',
				}, {
					name: '退款成功',
					value: 'refund',
				}, {
					name: '退款关闭',
					value: 'reject',
				}, ],
				orderList: [],
				queryForm: {
					storeId: "",
					keyword: "",
					userKeyword: "",
					state: "afterSale",
					scene: "",
					pageNo: 1,
					pageSize: 10,
				},
			}
		},
		onLoad() {
			this.fetchData()
		},
		methods: {
			async fetchData() {
				let {
					data: {
						list,
						pageNo,
						pageSize,
						total
					},
				} = await this.beg.request({
					url: this.api.orderList,
					data: this.queryForm,
				})
				this.orderList = list
			},
			async handPrint(v) {
				let {
					msg
				} = await this.beg.request({
					url: `${this.api.printOrder}/${v.id}`,
					method: "POST",
				})
				this.fetchData()
				uni.$u.toast(msg)
			},
			tabChange(form) {
				this.queryForm.state = form.value
				this.current = form.index
				this.fetchData()
			},
			toDtail(v) {
				uni.navigateTo({
					url: `/pages/order/detail?id=${v.id}`
				})
			},
			tocenter(e) {
				uni.makePhoneCall({
					phoneNumber: e
				});
			},
			ckwz(obj){
				uni.openLocation({
					latitude: +obj.lat,
					longitude: +obj.lng,
					address: obj.address,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
</style>